<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_列表渲染_过滤与排序</title>
</head>
<body>
<!--
1. 列表过滤
2. 列表排序
-->
<div id="root">
  <input type="text" placeholder="请输入搜索用户名" v-model="searchName">
  <ul>
    <li v-for="person in filterPersons" :key="person.id">
      {{person.id}} -- {{person.name}} -- {{person.age}}
    </li>
  </ul>
  <!-- <button @click="order('asc')">年龄升序</button>
  <button @click="order('desc')">年龄降序</button>
  <button @click="order('origin')">原本顺序</button> -->

  <button @click="orderType = 'asc'">年龄升序</button>
  <button @click="orderType = 'desc'">年龄降序</button>
  <button @click="orderType = 'origin'">原本顺序</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#root',
    data: {
      searchName: '',
      persons: [
        {id: 1, name: 'jack', age: 18},
        {id: 2, name: 'rose', age: 16},
        {id: 3, name: 'tom', age: 20},
        {id: 4, name: 'jerry', age: 23},
        {id: 5, name: 'peiqi', age: 24},
        {id: 6, name: 'peihua', age: 10},
      ],
      orderType: 'origin'
    },
    methods: {
      // order(type) {
      //   this.orderType = type;
      // }
    },
    computed: {
      // 计算属性：返回过滤后的数据
      filterPersons() {
        // 原数据 this.persons
        // 过滤条件 this.searchName
        const filterPersons = this.persons.filter((person) => {
          // 如果用户名包含了searchName，就保留
          // return person.name.includes(this.searchName);
          return person.name.indexOf(this.searchName) !== -1;
        });

        // 排序
        if (this.orderType === 'origin') return filterPersons;

        const sortPersons = filterPersons.sort((a, b) => {
          return this.orderType === 'asc' ? a.age - b.age : b.age - a.age ;
        })

        return sortPersons;
      }
    }
  })
</script>
</body>
</html>